<template>
  <div class="home-page">
    <div class="feed-container">
      <!-- 左侧主要内容区 -->
      <div class="main-feed">
        <el-tabs v-model="activeTab" class="feed-tabs">
          <el-tab-pane label="推荐" name="recommend">
            <div v-if="loading" class="loading">
              <el-skeleton :rows="3" animated />
            </div>
            <div v-else class="question-list">
              <div v-for="question in questions" 
                   :key="question.id" 
                   class="question-item"
                   @click="goToDetail(question)">
                <h3 class="title">{{ question.name }}</h3>
                <p v-if="question.summary" class="summary">{{ question.summary }}</p>
                <div class="meta">
                  <span class="time">{{ formatTime(question.createdAt) }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="最新" name="latest">
            <div v-if="loading" class="loading">
              <el-skeleton :rows="3" animated />
            </div>
            <div v-else class="question-list">
              <div v-for="question in questions" 
                   :key="question.id" 
                   class="question-item"
                   @click="goToDetail(question)">
                <h3 class="title">{{ question.name }}</h3>
                <p v-if="question.summary" class="summary">{{ question.summary }}</p>
                <div class="meta">
                  <span class="time">{{ formatTime(question.createdAt) }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 创作中心 -->
        <div class="creator-card">
          <h3>创作中心</h3>
          <el-button type="primary" @click="showAskDialog">
            提问
          </el-button>
        </div>

        <!-- 热门话题 -->
        <div class="hot-topics-card">
          <div class="card-header">
            <h3>热门话题</h3>
            <el-link type="primary">更多</el-link>
          </div>
          <div class="topics-list">
            <div v-for="topic in hotTopics" :key="topic.id" class="topic-item">
              <div class="topic-info">
                <span class="topic-name"># {{ topic.name }}</span>
                <span class="topic-count">{{ topic.questionCount }}个问题</span>
              </div>
              <p class="topic-desc">{{ topic.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加提问对话框组件 -->
    <question-dialog v-model:visible="askDialogVisible" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useQuestionStore } from '@/stores/question'
import QuestionDialog from '@/components/QuestionDialog.vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

// 设置中文语言
dayjs.locale('zh-cn')

const router = useRouter()
const questionStore = useQuestionStore()

// 页面状态
const activeTab = ref('recommend')
const askDialogVisible = ref(false)
const loading = ref(false)
const questions = ref([])

// 热门话题数据
const hotTopics = ref([
  {
    id: 1,
    name: '前端开发',
    questionCount: 1234,
    description: '前端开发技术讨论，包括但不限于HTML、CSS、JavaScript等'
  },
  {
    id: 2,
    name: '人工智能',
    questionCount: 892,
    description: 'AI领域最新发展与技术探讨'
  },
  {
    id: 3,
    name: '产品设计',
    questionCount: 756,
    description: '产品设计方法论与实践经验分享'
  },
  {
    id: 4,
    name: '后端开发',
    questionCount: 1089,
    description: '后端开发技术交流与架构设计讨论'
  },
  {
    id: 5,
    name: '职业发展',
    questionCount: 2341,
    description: '程序员职业规划与发展路径探讨'
  }
])

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).fromNow()
}

// 跳转到问题详情
const goToDetail = (question) => {
  router.push({
    name: 'question',
    params: { id: question.id }
  })
}

// 显示提问对话框
const showAskDialog = () => {
  askDialogVisible.value = true
}

// 获取问题列表
const fetchQuestions = async () => {
  loading.value = true
  try {
    if (activeTab.value === 'recommend') {
      await questionStore.fetchRecommendQuestions()
      questions.value = questionStore.getRecommendQuestions
    } else {
      await questionStore.fetchLatestQuestions()
      questions.value = questionStore.getLatestQuestions
    }
  } catch (error) {
    console.error('获取问题列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 监听标签页切换
watch(activeTab, () => {
  fetchQuestions()
})

// 初始加载
fetchQuestions()
</script>

<style scoped lang="scss">
.home-page {
  width: 100%;
}

.feed-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.main-feed {
  flex: 1;
  min-width: 0;
  
  .feed-tabs {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
  }

  .loading {
    padding: 20px;
  }

  .question-list {
    .question-item {
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: #f9f9f9;
      }

      .title {
        margin: 0 0 10px;
        font-size: 18px;
        font-weight: 600;
        color: #121212;
      }

      .summary {
        margin: 0 0 10px;
        font-size: 14px;
        color: #646464;
        line-height: 1.6;
      }

      .meta {
        font-size: 12px;
        color: #8590a6;
      }
    }
  }
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
  
  > div {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
    margin-bottom: 20px;
  }
}

.creator-card {
  h3 {
    margin: 0 0 15px;
    font-size: 16px;
    color: #121212;
  }
}

.hot-topics-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    h3 {
      margin: 0;
      font-size: 16px;
      color: #121212;
    }
  }
  
  .topics-list {
    .topic-item {
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      
      .topic-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .topic-name {
          font-size: 14px;
          font-weight: 600;
          color: #121212;
        }
        
        .topic-count {
          font-size: 12px;
          color: #8590a6;
        }
      }
      
      .topic-desc {
        font-size: 13px;
        color: #646464;
        margin: 0;
        line-height: 1.5;
      }
    }
  }
}
</style> 